<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    canvas {
        position: fixed;
        left: 0;
        top: 0;
        background: #fff;
    }
</style>

<body>
    <canvas></canvas>
</body>
<script>
    const canvas = document.querySelector('canvas')
    const ctx = canvas.getContext('2d')
    var count = 0
    let points = []


    function init() {
        canvas.width = window.innerWidth * devicePixelRatio
        canvas.height = window.innerHeight * devicePixelRatio
        for (let i = 1; i < 100; i++) {
            points.push({
                x: Math.floor(Math.random() * window.innerWidth),
                y: Math.floor(Math.random() * window.innerHeight)
            })
        }
    }

    function draw() {
        ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
        points.forEach(item => {
            ctx.beginPath()
            ctx.arc(item.x - Math.floor(Math.random() * 10), item.y - Math.floor(Math.random() * 10), 3, 0, 2 * Math.PI)
            ctx.strokeStyle = '#000'
            ctx.fillStyle = '#000'
            ctx.stroke()
            ctx.fill()
        })

        requestAnimationFrame(draw)
    }

    function drawImage() {
        // ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
        points.forEach(item => {
            const img = new Image()
            img.onload = () => {
                ctx.drawImage(img, item.x - 1, item.y - 1)
            }
            img.src = './point.png'
        })

        requestAnimationFrame(drawImage)
    }


    init()

    // draw()
    drawImage()


</script>

</html>